<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="wrap">
    <button class="btn">新增</button>
    <div class="list">
      <li class="first a b c">01</li>
      <li>02</li>
      <li class="mid">03</li>
      <li>04</li>
      <li>05</li>
      <li class="last">06</li>
    </div>
  </div>
</body>
<script>
  // getElementsByClassName() IE8 以下有问题
  // var first = document.getElementsByClassName("first")[0];
  // console.log(first);

  // document.querySelector IE7 以下有问题
  // var first = document.querySelector(".first");
  // console.log(first);

  // 需求:  模拟封装 getElementsByClassName(className)  => 从页面中所有的元素含有指定class名的元素

  // 如何获取页面的所有元素?
  // (1)   document.all
  // (2)   document.getElementsByTagName("*")

  var result = myGetElementsByClassName("first");
  console.log(result);

  function myGetElementsByClassName(className) {
    // var className = "first";
    var all = document.getElementsByTagName("*");
    console.log(all);

    var arr = [];
    for (var i = 0; i < all.length; i++) {
      var ele = all[i];  //遍历集合 => 每一个html元素
      var _class = ele.getAttribute("class");
      // console.log(_class);
      if (_class) { // 如果含有class名

        // 有问题 class名可能有多个 "first a b c"
        // if(_class === className){
        //     arr.push(ele);
        // }

        // 有问题 "first123123 a b c" 也包含 "first"
        // if(_class.indexOf(className)!=-1){
        //     arr.push(ele);
        // }

        // 有问题?  IE8以及以下 没有indexOf() 方法
        // var classList = _class.split(" ");
        // // console.log(classList);
        // if(classList.indexOf(className)!=-1){
        //     arr.push(ele);
        // }


        // 有问题?  IE8以及以下 没有indexOf() 方法
        var classList = _class.split(" ");
        // console.log(classList);
        if (myIndexOf(classList, className) != -1) {
          arr.push(ele);
        }


      }

    }
    return arr;
  }

  function myIndexOf(arr, char) {
    // var arr = [1,2,3,4];
    // var char = "1";

    var index = -1; //假设不存在 -1
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i];
      if (item === char) {
        index = i;  //存在就记录下标
      }
    }
    return index;
  }


  // 总结
  // 常见的IE兼容 (JS)
  // 1. IE 和 常规浏览器的语法不同,写兼容

  function first(ele) {
    if (ele.firstElementChild) { //常规浏览器
      return ele.firstElementChild;
    } else {
      return ele.firstChild;
    }
  }

  // 2. IE低版本 没有对应的方法 => 兼容(模拟封装)

  function myIndexOf(arr, char) {
    // var arr = [1,2,3,4];
    // var char = "1";

    var index = -1; //假设不存在 -1
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i];
      if (item === char) {
        index = i;  //存在就记录下标
      }
    }
    return index;
  }


</script>

</html>